<template>
  <base-form ref="form" :model-value="modelValue" @update:model-value="emits('update:modelValue', $event)">
    <text-input
      ref="inputRef"
      :autofocus="autofocus"
      :label="label"
      :rules="rules"
      :model-value="modelValue.value"
      @enter="emits('enter')"
      @update:value="emits('update:modelValue', {value: $event});"
    />
  </base-form>
</template>

<script setup lang="ts">
import BaseForm from '../common/BaseForm.vue'
import TextInput from '../common/TextInput.vue'
import { ValidateRule } from 'sfc-common/model/component/type'
const inputRef = ref() as Ref<ComponentPublicInstance>
const form = ref() as Ref<CommonForm>
const inputVal = ref()
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return { value: '' }
    }
  },
  label: {
    type: String,
    default: ''
  },
  rules: {
    type: Array as PropType<ValidateRule[]>,
    default: () => []
  },
  autofocus: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:modelValue', 'enter'])
defineExpose(deconstructForm(form))
onMounted(() => {
  inputVal.value = props.modelValue.value
})
</script>

<script lang="ts">
import { CommonForm, deconstructForm, defineBaseForm } from 'sfc-common/utils/FormUtils'
import { defineComponent, defineProps, PropType, ref, Ref, defineExpose, defineEmits, onMounted, computed, ComponentPublicInstance } from 'vue'
import { context } from 'sfc-common/core/context'

export default defineComponent({
  name: 'SingleFieldForm'
})
</script>